<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="交易" leftIcon="" :placeholder="true">
		</u-navbar>
		<view class="content-bg">
			<view class="content-box">
				<view class="release">
					<view style="text-align: center;">当前价格</view>
					<view class="release-title">
						1
					</view>
					<view class="info-list">
						<!-- <view class="info-item">
							<view class="title">日交易</view>
							<view class="mintitle">{{topinfo.AssetsToday}}</view>
						</view> -->
						<view class="info-item">
							<view class="title">周交易</view>
							<view class="mintitle">{{topinfo.zhou}}</view>
						</view>
						<view class="info-item">
							<view class="title">总交易</view>
							<view class="mintitle">{{topinfo.zong}}</view>
						</view>
					</view>
				</view>
				<view class="ability">
					<view class="ability-item" v-for="(item,index) in abilityList" :key="index"
						@click="gonavto(item.url)">
						<image :src="item.img" mode=""></image>
						<view class="item-text">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="head">
					<view :class="item.show == true?'activity':'stillness'" class="head-item"
						v-for="(item,index) in headList" :key="index" @click="headTab(item,index)">
						{{item.text}}
					</view>
				</view>
				<view class="info" v-for="(item,index) in list" :key="index">
					<view class="info-head">
						<view class="head-left">
							<image :src="item.avatar" mode=""></image>
							<view>
								{{item.user}}
							</view>
						</view>
						<view class="info-btn" v-if="type==1">
							<u-button type="primary" style="color: #000; height: 60rpx;"
								color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" @click="gobuy(item)"
								text="供应"></u-button>
						</view>
						<view class="info-btn" v-if="type==2">
							<u-button type="primary" style="color: #000; height: 60rpx;"
								color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" @click="gobuy(item)"
								text="购买"></u-button>
						</view>
					</view>
					<view class="info-num">
						<view class="num">
							{{item.num}}
						</view>
						<view class="price">
							<text>{{item.total_price}}</text>
						</view>
					</view>
					<view class="info-text">
						<view>
							数量(云矿石)
						</view>
						<view>
							金额(元)
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-keyboard ref="uKeyboard" class="pwd-pop" @change="changePwd" @backspace="clearPwd" :show="showKeyboard"
			mode="number" :dot-enabled="false" :tooltip="false" default="">
			<view class="flex-between-center head-tab">
				<view class="title">验证支付密码</view>
				<view class="close-text" @click="closePwd">
					<u-icon name="close-circle" size="50rpx"></u-icon>
				</view>
			</view>
			<view style="display: flex;justify-content: center;">
				<u-code-input :hairline="false" size="43" color="#000" focus disabled-keyboard dot :space="22"
					v-model="password" :maxlength="6"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				abilityList: [{
						text: '我的订单',
						img: '/static/factory/ability1.png',
						url: '/pages/otc/my_release/index'
					},
					{
						text: '我的求购',
						img: '/static/factory/ability2.png',
						url: '/pages/otc/my_trade/index'
					},
					{
						text: '发布交易',
						img: '/static/factory/ability3.png',
						url: '/pages/otc/reslease_trade/index'
					},
					{
						text: '发布求购',
						img: '/static/factory/ability4.png',
						url: '/pages/otc/buy/index'
					},
					{
						text: '收款方式',
						img: '/static/factory/ability5.png',
						url: '/pages/my/pay_binding/index'
					}
				],
				headList: [{
						text: '出售云矿石',
						type: 2,
						show: true
					},
					{
						text: '求购云矿石',
						type: 1,
						show: false
					}
				],
				list: [],
				status: "loadmore",
				page: 1,
				type: 2,
				showKeyboard: false,
				password: '',
				pwdList: [],
				id: '',
				num: '',
				topinfo: {}
			}
		},
		onShow() {
			this.islogin()
			this.page = 1
			this.getList(this.type)
		},
		onReachBottom() {
			this.status = "loading"
			this.page++
			this.getList(this.type)
		},
		methods: {
			islogin() {
				let token = uni.getStorageSync('token')
				if (token == '' || token == undefined) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
					return
				}
			},
			changePwd(e) {
				this.pwdList.push(e)
				if (this.pwdList.length > 6) return
				if (this.pwdList.length === 6) {
					this.password += this.pwdList[this.pwdList.length - 1];
					if (this.ok) return
					if (this.type == 2) {
						this.gobuy2()
					} else {
						this.gobuy3()
					}

				} else {
					this.password += e;
				}
			},
			gobuy(item) {
				this.id = item.id
				this.num = item.num
				this.showKeyboard = true
			},
			gobuy3() {
				this.pwdList = []
				uni.showLoading({
					mask: true,
					title: '下单中...'
				})
				let params = {
					id: this.id,
					password: this.password,
					num: this.num
				}
				this.$Request({
					method: 'POST',
					url: '/api/exchange/sellOrderDetails',
					data: params
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.password = ""
						this.showKeyboard = false;
						uni.showToast({
							title:'已供应！等待对方付款',
							icon:'none'
						})
						this.getList(this.type)
					} else {
						this.password = ""
						this.pwdList = []
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			gobuy2() {
				this.pwdList = []
				uni.showLoading({
					mask: true,
					title: '下单中...'
				})
				let params = {
					id: this.id,
					password: this.password,
					num: this.num
				}
				this.$Request({
					method: 'POST',
					url: '/api/exchange/buyOrderDetails',
					data: params
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.password = ""
						this.showKeyboard = false;
						uni.navigateTo({
							url: '/pages/otc/state/downOrder?id=' + this.id
						})
					} else {
						this.password = ""
						this.pwdList = []
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			clearPwd() {
				if (this.password.length > 0) {
					this.pwdList = this.pwdList.slice(0, -1)
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			getList(type) {
				this.$Request({
					method: 'POST',
					url: '/api/exchange/coinList',
					data: {
						page: this.page,
						type
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.topinfo = res.data
						if (res.data.list.length < 10) {
							this.status = "nomore"
						}
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list];
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			closePwd() {
				this.showKeyboard = false;
				this.password = ""
				this.pwdList = []
			},
			headTab(item, index) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				this.type = item.type
				this.list = []
				this.page = 1
				this.getList(item.type)
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background: #17191A;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-image: url('../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 568rpx;

		/deep/ .u-keyboard {
			background-color: #fff;
			border-radius: 0 20rpx;
		}

		.pwd-pop {
			border-radius: 10px 10px 0 0;
			box-sizing: border-box;
			overflow: hidden;

			.head-tab {
				display: flex;
				width: 100%;
				padding: 40rpx 0;
				box-sizing: border-box;
				justify-content: center;

				.title {
					color: #000;
					font-weight: bold;
				}

				.close-text {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					color: #adaeb3;
				}
			}

			.pass-input-title {
				text-align: center;
				margin: 10px 0;
			}

			.all-money {
				padding: 0 0 20rpx;
				margin-bottom: 10rpx;
				text-align: center;
				border-bottom: 2px solid #f5f5f5;
				font-size: 80rpx;
				font-family: "din";
				font-weight: bold;

				text {
					font-size: 28rpx;
					margin-left: 10rpx;
					font-weight: normal;
				}
			}

			.van-number-keyboard {
				width: 108%;
				margin-left: -4%;
				position: initial;
			}
		}

		.content-bg {
			.content-box {
				padding: 0rpx 30rpx 30rpx 30rpx;

				.listtitle {
					color: #fff;
					margin-top: 20rpx;
					font-weight: 600;
					padding: 0 10rpx;
				}

				.ability {
					display: flex;
					justify-content: space-around;
					text-align: center;
					padding: 30rpx 0;

					.ability-item {
						image {
							width: 88rpx;
							height: 88rpx;
						}

						.item-text {
							font-size: 24rpx;
							color: #fff;
							margin-top: 15rpx;
						}
					}
				}

				.release {
					margin-top: 40rpx;
					padding: 30rpx;
					color: #fff;
					background: linear-gradient(90deg, rgba(19, 46, 40, 0.2) 0%, rgba(112, 242, 141, 0.2) 100%);
					border: 4rpx solid #70F28D;
					position: relative;
					border-radius: 20rpx;

					.info-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.info-item {
							width: 48%;
							height: 145rpx;
							background-image: url('../../static/factory/list-bg.png');
							background-repeat: no-repeat;
							background-size: 100% 145rpx;
							padding: 30rpx;

							.title {
								font-size: 24rpx;
								color: #dedede;
							}

							.mintitle {
								font-size: 28rpx;
								font-weight: 600;
								margin-top: 15rpx;
							}
						}
					}

					.release-text {
						font-size: 24rpx;
						display: flex;
						align-items: center;
					}

					.release-title {
						font-size: 48rpx;
						font-weight: 600;
						margin-top: 10rpx;
						text-align: center;
					}
				}

				.head {
					display: flex;
					justify-content: space-between;
					text-align: center;
					padding: 30rpx;

					.head-item {
						width: 300rpx;
						font-size: 28rpx;
						font-weight: 600;
						border: 1rpx solid transparent;
						padding: 30rpx;
						border-radius: 30rpx;
					}

					.activity {
						color: #70F28D;
						background-color: linear-gradient(90deg, rgba(19, 46, 40, 0.2) 0%, rgba(112, 242, 141, 0.2) 100%);
						border: 1rpx solid #70F28D;
					}

					.stillness {
						background-color: rgba(255, 255, 255, .05);
						color: #fff;
					}
				}

				.info {
					padding: 30rpx;
					margin-bottom: 30rpx;
					background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
					border: 4rpx solid rgba(108, 233, 137, 0.12);
					border-radius: 30rpx;
					margin-top: 20rpx;

					.info-head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #fff;

						.head-left {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							font-weight: 600;

							image {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
						}

						.info-btn {
							width: 160rpx;
						}
					}

					.info-num {
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						.num {
							width: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #A1FFA9;
							font-size: 30rpx;
							font-weight: 600;
						}

						.price {
							width: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 30rpx;
							color: #A1FFA9;

							text {
								font-weight: 600;
								font-size: 30rpx;
							}
						}
					}

					.info-text {
						display: flex;
						justify-content: space-between;
						color: #999;
						font-size: 24rpx;
						margin-top: 10rpx;

						view {
							width: 50%;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>